import React, { useEffect, useState, useRef } from 'react'
import { MoreOutlined, PlusOutlined } from '@ant-design/icons'
import {
    Button,
    Col,
    Flex,
    Form,
    Input,
    Row,
    Select,
    Typography,
    Table,
    Modal,
    Switch,
    Space,
    Divider,
    Dropdown, message
} from 'antd'
import MyDatePicker from '../components/MyDatePicker'
import {Link, useNavigate} from 'react-router-dom'
import {getTagList, getTagTypeList, tagEdit, tagTypeAdd, tagTypeUpdate} from '../service/tag'

export default function TagList() {
    const [isShow, setIsShow] = useState(false)
    const [isShow2, setIsShow2] = useState(false)
    const navigate = useNavigate()
    const [pageNo, setPageNo] = useState(1)
    // 保存总页码
    const [total, setTotal] = useState(0)
    const [pageSize, setPageSize] = useState(10000)
    // 保存选择的日期
    const [selectedDateString, setSelectedDateString] = useState(null)
    const [form] = Form.useForm()
    const [form2] = Form.useForm()
    // 创建表单的引用
    const formRef = useRef()
    const formRef2 = useRef()
    // 模态框
    const [isModalOpen01, setIsModalOpen01] = useState(false)
    const [isModalOpen02, setIsModalOpen02] = useState(false)
    const [tagList, setTagList] = useState([]); // 初始值为空数组


    // 用于更新列表
    const [n, setN] = useState(1)


    const tagTypeOk = async () => {
        try {
            const values = await form2.validateFields();
            const typeName = values.typeName;

            if (!typeName) {
                message.error("请填写标签分类名称");
                return;
            }

            const response = await tagTypeAdd({
                typeName: typeName
            });

            if (response.success) {
                message.success("标签分类添加成功");
                // 关键：刷新标签分类列表
                await fetchTagTypeList();
                setIsModalOpen02(false);
                form2.resetFields(['typeName']);
            } else {
                message.error("标签分类添加失败");
            }
        } catch (error) {
            console.error('表单验证失败或请求出错:', error);
            message.error("操作失败");
        }
    };


    const tagGroupOk = async () => {
        try {
            const values = await form.validateFields();
            const groupName = values.tagName;

            if (!groupName) {
                message.error("请填写标签分组名称");
                return;
            }

            const response = await tagTypeAdd({
                parentId: currentGroupId,
                typeName: groupName
            });

            if (response.success) {
                message.success("标签分组添加成功");
                // 关键：刷新标签分类列表
                await fetchTagTypeList();
                setIsModalOpen01(false);
                form.resetFields(['tagName']);
            } else {
                message.error("标签分组添加失败");
            }
        } catch (error) {
            console.error('表单验证失败或请求出错:', error);
            message.error("操作失败");
        }
    };

    // 新增：存储标签分类数据（从后端获取）
    const [leftTagType, setLeftTagType] = useState([]);
    // 列表页对应的分类
    const [tagTypes, setTagTypes] = useState([]);
    // 新增：控制每个分组的展开/折叠状态（对象形式存储，key为分组ID）
    const [typeExpanded, setTypeExpanded] = useState({});
    // 新增：记录当前操作的分组ID（用于新增、重命名、删除）
    const [currentGroupId, setCurrentGroupId] = useState(null);
    // 新增状态：控制重命名弹窗的显示/隐藏
    const [renameModalVisible, setRenameModalVisible] = useState(false);
    // 新增状态：存储当前要重命名的分组信息
    const [currentRenameType, setCurrentRenameType] = useState({id: null, name: ''});
    // 重命名表单实例
    const [renameForm] = Form.useForm();

    useEffect(() => {
        // 调用接口，params 为接口所需的参数（如无参数可传空对象 {}）
        getTagList({})
            .then((res) => {
                console.log('接口返回数据：', res.data);
                console.log('res.data 类型:', Array.isArray(res.data) ? '数组' : typeof res.data);
                // 检查数据结构是否符合表格要求

                if (res.data && Array.isArray(res.data)) {
                    setTagList(res.data);
                } else if (res.data && res.data.objects && Array.isArray(res.data.objects)) {
                    // 如果数据在 objects 字段中
                    setTagList(res.data.objects);
                } else {
                    setTagList([]);
                }
                let response;
                setTotal(response.data.total)
                setPageNo(response.data.pageNo)
            })
            .catch((error) => {
                console.error('获取标签列表失败：', error);
            });
            // 获取标签分类列表
            fetchTagTypeList();
            fetchTagList(0, 0);

    }, [n]); // 空依赖数组，确保只在组件挂载时执行一次

    // 打开重命名弹窗
    const handleRenameType = (groupId, oldName) => {
        // 记录当前分组信息
        setCurrentRenameType({id: groupId, name: oldName});
        // 表单回显当前名称
        renameForm.setFieldsValue({newName: oldName});
        // 显示弹窗
        setRenameModalVisible(true);
    };

    // 提交重命名
    const handleRenameSubmit = async () => {
        try {
            const values = await renameForm.validateFields();
            const response = await tagTypeUpdate({
                id: currentRenameType.id,
                typeName: values.newName
            });

            if (response.success) {
                message.success('重命名成功');
                // 关键：刷新标签分类列表
                await fetchTagTypeList();
                setRenameModalVisible(false);
            } else {
                message.error('重命名失败');
            }
        } catch (err) {
            message.error('重命名失败');
        }
    };

    // 删除分类方法
    const handleDeleteType = (typeId) => {
        Modal.confirm({
            title: '确认删除',
            content: '确定要删除该分类吗？',
            onOk: async () => {
                try {
                    const response = await tagTypeUpdate({
                        id: typeId,
                        status: 2
                    });

                    if (response.success) {
                        message.success('删除成功');
                        // 关键：刷新标签分类列表
                        await fetchTagTypeList();
                    } else {
                        message.error('删除失败');
                    }
                } catch (error) {
                    message.error('删除失败');
                }
            }
        });
    };

    //获取标签数据
    const fetchTagList = async (tagSize, tagNo) => {
        try {
            if (tagSize > 0) {
                setPageSize(tagSize)
                setPageNo(tagNo)
            }

            const response = await getTagList({pageSize, pageNo})
            if (response.success) {
                setTagList(response.data.objects)

                setTotal(response.data.total)
                setPageNo(response.data.pageNo)
            } else {
                message.warning('获取标签分类失败')
            }
        } catch (err) {
            console.error('获取分组数据失败：', err);
        }
    };

    //获取标签分类数据
    const fetchTagTypeList = async () => {
        try {
            const response = await getTagTypeList();
            if (response.success) {
                setLeftTagType(response.data);
                // 设置所有父级分类默认展开
                if (response.data && response.data.length > 0) {
                    const expandedState = {};
                    response.data.forEach(item => {
                        if (item.parentId === 0 || !item.parentId) { // 父级分类默认展开
                            expandedState[item.id] = true;
                        }
                    });
                    setTypeExpanded(expandedState);
                }
            } else {
                message.warning('获取标签分类失败');
            }
        } catch (err) {
            console.error('获取分类信息失败：', err);
        }
    };

    //点击查询按钮触发
    const handleSearch = async (values) => {
        try {
            // 构造查询参数
            const params = {
                pageSize: pageSize,
                pageNo: 1, // 重置到第一页
                tagName: values.tagName, // 标签名称查询条件
                status: values.status, // 启用状态查询条件
                tagType: values.tagType, // 标签分类查询条件
            };

            // 如果有日期查询条件，也添加到参数中
            if (selectedDateString) {
                params.updateTime = selectedDateString;
            }

            const response = await getTagList(params);
            if (response.success) {
                // 根据返回数据结构设置标签列表
                if (response.data && Array.isArray(response.data)) {
                    setTagList(response.data);
                } else if (response.data && response.data.objects && Array.isArray(response.data.objects)) {
                    setTagList(response.data.objects);
                } else {
                    setTagList([]);
                }

                // 更新分页信息
                if (response.data && response.data.total !== undefined) {
                    setTotal(response.data.total);
                }
                if (response.data && response.data.pageNo !== undefined) {
                    setPageNo(response.data.pageNo);
                }
            } else {
                message.warning('获取标签列表失败');
            }
        } catch (err) {
            console.error('查询标签数据失败：', err);
            message.error('查询异常');
        }
    };

    const refreshTagList = () => {
        setN(prev => prev + 1)  // 通过改变n触发useEffect重新请求
    }

    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>标签管理</Typography.Title>
                        <Button
                            type="primary"
                            icon={<PlusOutlined />}
                            onClick={() => {
                                // setIsModalOpen02(true)
                                navigate('/admin/tag/add')
                            }}
                        >
                            新增标签
                        </Button>
                    </Flex>
                </Col>
            </Row>
            <Row>
                <Col span={4}>
                    <div className="container" style={{height: '99%', width: '95%'}}>


                        <Space direction="vertical" style={{width: '100%'}}>
                            <Button
                                type="primary"
                                block
                                onClick={() => {
                                    setIsModalOpen02(true)
                                }}
                            >
                                新增分类
                            </Button>
                            {/*<Input.Search placeholder="请输入搜索关键字"/>*/}

                            {/*从数据库获取数据，显示分类标签*/}



                            {leftTagType.map((type) => (
                                <React.Fragment key={type.id}> {/* 使用分组ID作为key */}
                                    {/* 分组标题栏（包含名称、新增按钮、更多操作） */}
                                    <Flex
                                        justify={'space-between'}
                                        style={{
                                            padding: '5px 10px',
                                            borderRadius: 5,
                                            backgroundColor: '#EEE',
                                            position: 'relative'
                                        }}
                                    >
                                        <span
                                            style={{ cursor: 'pointer', color: '#666' }}
                                            onClick={() => {
                                                setTypeExpanded(prev => ({
                                                    ...prev,
                                                    [type.id]: !prev[type.id]
                                                }));
                                            }}
                                        >
                                        {type.typeName.length > 5 ? type.typeName.slice(0, 5) + '...' : type.typeName}
                                        </span>
                                        {/* 新增子标签按钮 */}
                                        <PlusOutlined
                                            onClick={() => {
                                                setIsModalOpen01(true);
                                                // 记录当前分组ID，用于新增子标签时关联分组
                                                setCurrentGroupId(type.id);
                                            }}
                                            style={{
                                                marginLeft: 24,
                                                fontSize: 10,
                                                position: 'absolute',
                                                right: 30,
                                                top: 9,
                                                cursor: 'pointer'
                                            }}
                                        />
                                        {/* 更多操作下拉框 */}
                                        <Dropdown
                                            trigger={['click']}
                                            menu={{
                                                items: [
                                                    {
                                                        label: '重命名',
                                                        key: 'rename',
                                                        onClick: () => handleRenameType(type.id, type.typeName) // 重命名当前分组
                                                    },
                                                    {
                                                        label: '删除',
                                                        key: 'delete',
                                                        onClick: () => handleDeleteType(type.id) // 删除当前分组
                                                    }
                                                ]
                                            }}
                                        >
                                            <MoreOutlined style={{cursor: 'pointer'}}/>
                                        </Dropdown>
                                    </Flex>
                                    {/* 分组下的子标签列表（根据展开状态显示/隐藏） */}
                                    <Flex
                                        vertical
                                        style={{
                                            paddingLeft: '10px',
                                            lineHeight: '22px',
                                            // 动态控制显示：如果当前分组展开则显示，否则隐藏
                                            display: typeExpanded[type.id] ? 'flex' : 'none'
                                        }}
                                    >
                                        {/* 循环渲染当前分组下的子标签 */}
                                        {type.child && type.child.length > 0 ? (
                                            type.child.map((child) => (
                                                <span key={child.id} style={{cursor: 'pointer'}}>
                                                    {child.typeName.length > 5 ? child.typeName.slice(0, 5) + '...' : child.typeName}
                                                </span>
                                            ))
                                        ) : (
                                            <span style={{color: '#999', fontSize: '12px'}}>暂无子标签</span>
                                        )}
                                    </Flex>
                                </React.Fragment>

                            ))}
                        </Space>
                    </div>
                </Col>
                <Col span={20}>
                    <Row className="container">
                        <Col span={24}>
                            <Form layout="inline" form={form}
                                  onFinish={handleSearch}>
                                <Form.Item label="标签名称：" name="tagName">
                                    <Input />
                                </Form.Item>
                                <Form.Item label="启用状态：" name="status">
                                    <Select
                                        placeholder="状态选择"
                                        options={[
                                            {
                                                value: '0',
                                                label: '启用'
                                            },
                                            {
                                                value: '1',
                                                label: '禁用'
                                            }
                                        ]}
                                    />
                                </Form.Item>
                                <Form.Item label="标签分类：" name="tagType">
                                    <Select
                                        placeholder="分类选择"
                                        options={[
                                            {
                                                value: '0',
                                                label: '内容标签'
                                            },
                                            {
                                                value: '1',
                                                label: '用户标签'
                                            }
                                        ]}
                                    />
                                </Form.Item>
                                <Form.Item label="更新时间">
                                    <MyDatePicker
                                        selectedDateString={selectedDateString}
                                        setSelectedDateString={setSelectedDateString}
                                    />
                                </Form.Item>

                                <Form.Item>
                                    <Button type="default" htmlType="reset">
                                        重置
                                    </Button>
                                </Form.Item>
                                <Form.Item>
                                    <Button type="primary" htmlType="submit">
                                        查询
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Col>
                    </Row>
                    <Row className="container">
                        <Col span={24}>
                            <Typography.Paragraph style={{ fontSize: 16 }}>
                                标签列表
                            </Typography.Paragraph>
                        </Col>
                        <Col span={24}>
                            <Table
                                rowKey="id"
                                dataSource={tagList}
                                columns={[
                                    {
                                        title: '标签ID',
                                        dataIndex: 'id',
                                        key: 'id'
                                    },
                                    {
                                        title: '标签名称',
                                        dataIndex: 'tagName',
                                        key: 'name'
                                    },
                                    {
                                        title: '标签分组',
                                        dataIndex: 'typeName',
                                        key: 'typeName',
                                        // render: (text) => {
                                        //     // 根据标签分类ID范围显示对应的顶级分类
                                        //     // 3/4/10-15 显示内容标签（0）
                                        //     // 5-9/16-30 显示用户标签（1）
                                        //     if ([3, 4, 10, 11, 12, 13, 14, 15].includes(text)) {
                                        //         return '内容标签';
                                        //     } else if (text >= 5 && text <= 9 || text >= 16 && text <= 30) {
                                        //         return '用户标签';
                                        //     } else if (text === 1) {
                                        //         return '用户标签';
                                        //     } else if (text === 0) {
                                        //         return '内容标签';
                                        //     } else {
                                        //         return text;
                                        //     }
                                        // }
                                    },
                                    {
                                        title: '创建时间',
                                        dataIndex: 'createAt',
                                        key: 'createTime'
                                    },
                                    {
                                        title: '内容描述',
                                        dataIndex: 'tagDesc',
                                        key: 'description'
                                    },
                                    {
                                        title: '状态',
                                        dataIndex: 'status',
                                        key: 'status',
                                        render: (_, record) => {
                                            return <Switch
                                                checked={record.status === 0}
                                                onChange={async (value) => {
                                                    const updateData = {
                                                        id: record.id,
                                                        status: value ? 0 : 1, //0为启用，1为关闭
                                                    }
                                                    //调用编辑接口，修改状态
                                                    const res = await tagEdit(updateData)
                                                    message.success(`标签${updateData.status ? '停用' : '启用'}`);
                                                    fetchTagList(10, 1);
                                                }}
                                            />
                                        }
                                    },
                                    {
                                        title: '操作',
                                        dataIndex: 'op',
                                        key: 'op',
                                        align: 'center',
                                        render: (_, record) => {
                                            console.log(record.id)
                                            return (
                                                <span className="op">
                                              <Link to={`/admin/tag/edit/${record.id}`}
                                              >编辑</Link>
                                <a onClick={async () => {
                                    const updateData = {
                                        id: record.id,
                                        status: 2 //0为启用，1为关闭,2为删除
                                    }
                                    const res = await tagEdit(updateData)
                                    //console.log(res)
                                    if (res.code === '0') {
                                        message.success('删除成功')
                                        setN(n + 1)
                                        // 使用 refreshTagList 触发更新
                                        refreshTagList();
                                    }
                                    setTotal(res.data.total)
                                }}
                                >删除</a>
                        </span>
                                            )
                                        }
                                    }
                                ]}
                            />
                        </Col>
                    </Row>
                </Col>
            </Row>

            <Modal
                title="新增标签分组"
                open={isModalOpen01}
                onOk={tagGroupOk}  // 确认时调用 tagGroupOk
                onCancel={() => setIsModalOpen01(false)}
                maskClosable={false}
                width={500}
                destroyOnClose
            >
                <Divider />
                <Form
                    form={form}
                    ref={formRef}
                    onFinish={tagGroupOk}  // 表单提交时也调用 tagGroupOk
                    preserve={false}
                >
                    <Form.Item
                        label="标签分组"
                        name="tagName"
                        rules={[
                            {
                                required: true,
                                message: '请输入标签分组'
                            }
                        ]}
                    >
                        <Input placeholder="请输入标签分组名称" />
                    </Form.Item>
                </Form>
            </Modal>
            {/*新增分类弹出框*/}
            <Modal
                title="新增分类"
                open={isModalOpen02}
                onOk={tagTypeOk}
                onCancel={() => setIsModalOpen02(false)}
                maskClosable={false}
                width={500}
                destroyOnClose
            >
                <Divider/>
                <Form
                    form={form2}
                    ref={formRef2}
                    onFinish={() => {
                        setIsModalOpen02(false);
                    }}
                    preserve={false}
                >
                    <Form.Item
                        label="标签分类"
                        name="typeName"
                        rules={[
                            {
                                required: true,
                                message: '请输入标签分类'
                            }
                        ]}
                    >
                        <Input placeholder="请输入标签分类名称"/>
                    </Form.Item>
                </Form>
            </Modal>
            <Modal
                title="重命名分类"
                open={renameModalVisible}
                onOk={handleRenameSubmit}
                onCancel={() => setRenameModalVisible(false)}
                maskClosable={false}
                width={400}
            >
                <Form form={renameForm} layout="vertical">
                    <Form.Item
                        name="newName"
                        label="分类名称"
                        rules={[{required: true, message: '请输入新的分组名称'}]}
                    >
                        <Input placeholder="请输入分组名称" allowClear={true}/>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}
